<template>
  <div>
    <a-modal
      title="商品详情"
      :visible="visible"
      :confirm-loading="loading"
      :width="720"
      @ok="modalOk"
      @cancel="cancelModal"
    >
      <a-spin :spinning="loading">
        <a-form
          :form="form"
          v-bind="formLayout"
          @submit="formSubmit"
          v-if="detailData"
        >
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item label="电池ID">
                <!-- <span>{{ detailData.id }}</span> -->
                <a-input
                  v-decorator="['id', {rules: [{ required: true, message: '电池ID必须填写!' }], initialValue: detailData.id}]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="电池名称"
              >
                <a-input
                  v-decorator="['material', {rules: [{ required: true, message: '商品名称必须填写!' }], initialValue: detailData.material}]"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item
                label="总电量"
              >
                <a-input
                  v-decorator="['maxVol', {rules: [{ required: true, message: '商品价格必须填写!' }], initialValue: detailData.maxVol}]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="电池类型"
              >
                <a-select
                  @change="stateChange"
                  v-decorator="['state', {'initialValue': detailData.state + 2, rules: [{ required: true, message: '电池类型必须选择!' }]}]"
                >
                  <a-select-option v-for="(item, index) in batteryStatusList" :key="index" :value="index">{{ item }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item
                label="厂家代码"
              >
                <a-input
                  v-decorator="['facCode', {rules: [{ required: true, message: '厂家代码必须填写!' }], initialValue: detailData.facCode}]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="串数"
              >
                <a-input
                  v-decorator="['stringCount', {rules: [{ required: true, message: '电池串数必须填写!' }], initialValue: detailData.stringCount}]"
                />
                <!-- <a-select
                  @change="stateChange"
                  v-decorator="['stringCount', {'initialValue': detailData.stringCount + 2, rules: [{ required: true, message: '电池串数必须填写!' }]}]"
                >
                  <a-select-option v-for="(item, index) in batteryStatusList" :key="index" :value="index">{{ item }}</a-select-option>
                </a-select> -->
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item
                label="生产日期"
              >
                <a-date-picker
                  @change="onChange"
                  v-decorator="['productionDate', {rules: [{ required: true, message: '生产日期必须填写!' }], initialValue: detailData.productionDate}]"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import { getBatteryLists, batteryStatus, updateBattery } from '@/api/battery'
// postBattery
export default {
  name: 'BatteryDetail',
  data () {
    return {
      batteryStatusList: batteryStatus,
      loading: false,
      detailData: null,
      formLayout: {
        labelCol: {
          span: 6
          // xs: { span: 24 },
          // sm: { span: 7 }
        },
        wrapperCol: {
          span: 18
          // xs: { span: 24 },
          // sm: { span: 13 }
        }
      },
      form: this.$form.createForm(this, { id: 10000 })
    }
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    model: {
      type: Object,
      default: null
    }
  },
  watch: {
    visible (news, olds) {
      if (news) {
        this.init()
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      getBatteryLists({ id: this.model.id }).then(res => {
        this.detailData = res.data[0]
        console.log(res)
      }).catch(e => {
        console.error(e)
      })
    },
    onChange (value) {
      console.log(value)
    },
    modalOk () {
      this.loading = true
      // updateBattery(this.model.id, { id: 21, 'material': '硫酸铝铁4' }).then(res => {
      //   this.loading = false
      //   this.$emit('ok')
      // }).catch(e => {
      //   console.error(e)
      // })
      this.form.validateFieldsAndScroll((error, values) => {
        if (!error) {
          values.state -= 2
          updateBattery(this.model.id, values).then(res => {
            this.loading = false
            this.$emit('ok')
          }).catch(e => {
            console.error(e)
          })
        }
      })
    },
    cancelModal () {
      this.$emit('cancel')
    },
    formSubmit () {

    },
    stateChange () {

    }
  }
}
</script>

<style lang="scss" scoped>

</style>
